<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$珠峰培训$</title>
    <style>
        #canvas{
            box-shadow: 1px 1px 5px 2px #111;
        }
    </style>
</head>
<body>
<div id='div1'>珠峰培训</div>
<!--建立画布-->
<canvas id="canvas" width="800" height="500">
    您的浏览器版本不支持canvas，请升级您的浏览器
</canvas>
</body>
</html>
<script>
    //首先获取canvas画布
    var canvas = document.getElementById('canvas');
    //创建一个操作canvas的环境
    var ctx = canvas.getContext('2d');

    //创建一个构造函数，用于确定方块的位置，大小，颜色
    function Rect(x,y,w,h,color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

    //根据方块的位置，大小，颜色  画出这个方块；
    Rect.prototype.draw = function () {
        ctx.beginPath();//丢弃之前的路径，新开始一个路径
        ctx.fillStyle = this.color;//用于填充颜色
        ctx.rect(this.x,this.y,this.w,this.h);
        ctx.fill();
        ctx.stroke();
    }
    // new Rect(20,20,150,150,'#ccc').draw()

    //创建一个构造函数，用于决定创建构成蛇身体的方块

    function Snake() {
        //蛇是由一个一个的方块组成的，所以我们要用一个容器来存储这些方块
        var snakeAry = [];
        //我们定义，一开始蛇是由三个方块组成的
        for(var i = 0 ;i < 3 ;i++){
            //创建方块
            var rect = new Rect(i*20,0,20,20,'#24ccc8');
            //我们把创建的方块放到蛇的数组里，但是我们要知道，蛇应该是蛇头在前，身体在后，所以为了好操作，所以我们倒着放
            snakeAry.unshift(rect);
        }

        //我们把第一项当作蛇头，给他不同的颜色加以区分
        snakeAry[0].color = '#cc6a4f';
        this.head = snakeAry[0];

        //把我们刚刚定义的数组放到这个函数的私有属性上
        this.snakeAry = snakeAry;

        //我们先给他一个默认的运动方向
        this.direction = 39;


        //在这里我们把这个蛇的定义做好了
    }

    //画蛇，上边我们只是把蛇的相关数据定义好了 但是还没有渲染到页面上

    Snake.prototype.draw = function () {
        //画蛇  也就是我们要把蛇的每一个块画到画布上
        this.snakeAry.forEach((item)=>{
            item.draw()
        })
    };
    // new Snake().draw()//画蛇


    //接下来呢 我们要去移动蛇？怎么移动蛇呢？思路就是 让蛇头向前移动一格，再在蛇头之前的位置创建一个格，再把身体的最后一个格删掉；这样就相当于把蛇身整个向指定方向移动了一格；
    Snake.prototype.move = function () {
        var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,'#24ccc8');
        if(Math.abs(this.direction - this.prevDirection)==2){
            this.direction = this.prevDirection
        }
        switch (this.direction){
            case 37:
                this.head.x -= this.head.w;
                break;
            case 38:
                this.head.y -= this.head.h;
                break;
            case 39:
                this.head.x += this.head.w;
                break;
            case 40:
                this.head.y += this.head.h;
                break;
            default:
                break;
        }
        // this.head.x += this.head.w;
        this.snakeAry.splice(1,0,rect);
        if(isEat()){
            food = createFood()
        }else {
            this.snakeAry.pop();
        }
        this.draw();
        this.prevDirection = this.direction;

        //撞到自己身上
        this.snakeAry.forEach((item)=> {
            if (item !== this.head) {
                if (this.head.x == item.x && this.head.y == item.y) {
                    window.clearInterval(timer)
                }
            }
        });

        //撞到墙
        if(this.head.x >= canvas.width || this.head.x < 0 || this.head.y >= canvas.height || this.head.y < 0){
            window.clearInterval(timer)
        }
    }

    var snake = new Snake();
    var food = createFood();
    snake.draw();
    // var timer = window.setInterval(function () {
    //     ctx.clearRect(0, 0, canvas.width, canvas.height);
    //     snake.move();
    //     food.draw();
    // },100);
    //现在我们实现了蛇的移动，接下来我们要实现键盘控制舍得移动方向，
    // 37 向左  38 向上 39 向右  40 向下
    window.onkeydown = function (e) {
        snake.direction = e.keyCode;
        // switch(e.keyCode){
        //     case 37:
        //         if(snake.direction !== 39){
        //             snake.direction = 37;
        //         }
        //         break;
        //     case 38:
        //         if(snake.direction !== 40){
        //             snake.direction = 38;
        //         }
        //         break;
        //     case 39:
        //         if(snake.direction != 37){
        //             snake.direction = 39;
        //         }
        //         break;
        //     case 40:
        //         if(snake.direction != 38){
        //             snake.direction = 40;
        //         }
        //         break;
        //     default:
        //         break;
        // }
    }
    function createFood() {
        //食物的位置要是随机的，但是只能出现在画布的可视区域
        //左右区间是【0-n个小盒子*盒子的宽】n = 画布宽度/盒子宽度  - 1；上下的同理

        //我们还要判断食物是否是出现在了蛇的身上，如果是在蛇身上 那么我们重新获取
        var isOn = true;
        var rect = null;
        while(isOn){
            isOn = false;
            var x =  getRandom(canvas.width/20) * 20;
            var y = getRandom(canvas.height/20) * 20;
            snake.snakeAry.forEach((item)=>{
                if(item.x == x && item.y == y){
                    isOn = true
                }else {
                    rect = new Rect(x,y,20,20,'#26ffbc');
                }
            })
        }

        return rect;
    }
    function getRandom(max) {
        return Math.floor(Math.random()*max)
    }

    //判断是否吃到食物
    function isEat() {
        if(snake.head.x == food.x && snake.head.y == food.y){
            return true
        }else {
            return false
        }
    }
</script>  